<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../base.jsp" %>
<style>
	.content-wrapper{margin-left: 0px}
</style>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>系统配置<small>菜单管理</small></h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li class="active">菜单管理</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
        			<div class="col-md-12">
        				<div class="box box-solid">
				          <div class="box-header with-border">
				            <h3 class="box-title">菜单设置</h3>
				          </div>
				          <div class="box-body no-padding">
				            <ul id="treeDemo" class="ztree"></ul>
				            <ul id="serviceList" class="nav nav-pills nav-stacked">
				            </ul>
				            
				            <div class="box-footer">
				                <a class="btn btn-info save">保存</a>
				                <a class="btn btn-default cancel">取消</a>
				             </div>
				          </div>
				          <!-- /.box-body -->
				        </div>
        			</div>
        		</div>
			</section>
		</div>
	</div>
	<input type="text" id="roleId" value="${roleId }">
	<script type="text/javascript" src="${url }js/ztree/ztree.js"></script>
	<link rel="stylesheet" media="screen" href="${url }js/ztree/zTreeStyle/zTreeStyle.css"/>
	<script type="text/javascript">
	//zTree 的数据属性
	var zNodes = ${treeJson};
	$(function () {
		var zTreeObj;
		// zTree 的参数配置
		var setting = {
			data: {
				simpleData: {
					enable:true
				}
			},
			check: {
				enable: true
			}
		};
		zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTreeObj.expandAll(true);
	});
	
	$(".cancel").on("click",function(){
		location.href = path+'permission/role/list';
	});
	$(".save").on("click",function(){
		var roleId = $("#roleId").val();
		var menuIds = getSelectedIds();
		if(!menuIds){
			layer.msg("请选择菜单");return;
		}
		
		$.post(path+"permission/role/saveRoleMenu",{roleId:roleId,menuIds:menuIds},function(data){
			if(data > 0){
				layer.alert("分配菜单成功！");
				layer.msg('保存成功', {
           		  closeBtn: 0
           		}, function(){
					location.href = path+'permission/role/list';
           		});
			}else{
				layer.alert("分配菜单失败，请重新分配！");
			}
		})
	});
	//获取选择的多个选框ID
	function getSelectedIds() {
	    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	    checkCount = zTree.getCheckedNodes(true);

	    var classpurview = "";
	    for(var i=0;i<checkCount.length;i++) {
	    	if(i == 0){
	    		classpurview += checkCount[i].id
	    	}else{
	        	classpurview += "," + checkCount[i].id
	    	}
	    }
	    return classpurview;
	}
	</script>
</body>